<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../000-assets/js/vue3.js"></script>
    <style>
        .yellow{
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- {{}}里面只支持js表达式，不支持js语句 -->
        {{myname}}

        <!-- 
            虽然{{}}很好用，但是仅限于在标签的内容部分，而属性部分我们要使用v-bind: ,
            加上后就会去下面的js代码里找className，其实这里也是只支持表达式不支持js语句
            另外，v-bind: 因为打起字来比较费劲，所以有个语法糖 : 也就是一个冒号
         -->
        <div v-bind:class="className">123123</div>
        <div :class="className">123123</div>

        <!-- 
            而对于像表单元素的disabled这类属性而言，如果给这种属性添加了v-bind
            那么当值解析为true时，属性会生效。反之则失效
            比如这里我们把值设置为true，那么这个按钮的disabled生效，就会被禁用了
         -->
         <button :disabled="true">click me</button>

         <!-- 
            也许你要问了，如果未来我一个标签有好多属性都要加v-bind，能不能一次搞完呢，
            全放到html语句里有些不雅观。
            这种写法当然是有的，请看演示
            比如这里，我们就把图片标签的src、width、height放在了js中的一个对象里，通过这种写法就可以一次全放到img上
          -->
          <img :="imgObj"/>
    </div>
    <script>
        let app = {
            data() {
                return {
                    myname: 'hzj',
                    className:'yellow',
                    imgObj:{
                        src:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89181b80f04c7451e0d2ebd7f658aa12.jpg?thumb=1&w=1533&h=575&f=webp&q=90',
                        width:'153.3',
                        height:'57.5'
                    }
                }
            }
        }

        let vm = Vue.createApp(app).mount('#box');
    </script>
</body>

</html>